<template>
  <div class="goodsDetail">
    <div class="banner">
      <div class="bannerSwiper">
        <van-swipe v-if="goodsDetail.item_image && goodsDetail.item_image.length !== 0" :autoplay="3000">
          <van-swipe-item v-for="(item,index) in goodsDetail.item_image" :key="item.item_image_id">
            <img v-if="item.url" :src="item.url" alt="" @click="clickToViewImg(goodsDetail.item_image,index)">
            <img v-else src="../../../assets/images/loadingError.png">
          </van-swipe-item>
        </van-swipe>
        <div v-else style="width: 100%;height: 100%;">
          <img src="../../../assets/item-default.png">
        </div>
      </div>
      <div class="goodsInfo">
        <p class="title">
          {{ goodsDetail.title }}
        </p>
        <p>
          <span class="price">¥{{ Number(goodsDetail.price).toFixed(getitem.item_price_p) }}</span>
          <span class="tip">建议零售价:¥{{ Number(goodsDetail.market_price).toFixed(getitem.item_price_p) }}</span>
        </p>
      </div>
    </div>
    <div class="detail">
      <p class="top"><span>商品详情</span><span class="empty"/></p>
      <div v-if="goodsDetail.content" class="content" v-html="goodsDetail.content"/>
    </div>
    <div class="footerBox">
      <span class="btnIcon">
        <span class="shopCar" @click="clickToShopCar"><svg-icon icon-class="shopCar" /><i>购物车</i><i class="redPoint">{{ cartNums }}</i></span>
        <!--<span class="admin" @click="clickToAdmin"><svg-icon icon-class="admin" /><i>客服</i></span>-->
      </span>
      <span class="btnGroup">
        <span class="addShopCar" @click="addShopCar"/>
        <span class="buyNow" @click="buyNow"/>
      </span>
    </div>
    <goods-bottom-dialog ref="goodsDialog"/>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import goodsBottomDialog from '../components/goodsBottomDialog'
import { getItemDetail } from '@/api/goods'
import { PostAddCart } from '@/api/cart'
import { ImagePreview } from 'vant'
// import { setMiniChat } from '@/utils/miniChat'

export default {
  components: {
    goodsBottomDialog
  },
  data() {
    return {
      isOpen: false,
      btnContent: '',
      btnType: 1,
      goodsDetail: {
        item_image: [],
        price: 0,
        market_price: 0,
        title: '',
        content: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'getitem',
      'cartNums'
    ])
  },
  mounted() {
    this.getGoodsDetailInfo()
    this.$store.dispatch('setCartItemNumFn')
  },
  methods: {
    getGoodsDetailInfo() {
      const data = {
        item_id: this.$route.query.goodsId
      }
      getItemDetail(data).then(res => {
        const data = res.data
        if (data.status_code === 200) {
          this.goodsDetail = data.data
          console.log(this.goodsDetail)
          // const dataInfo = {
          //   type: 1,
          //   // eslint-disable-next-line
          //   goodsinfo: {
          //     data: {
          //       // eslint-disable-next-line
          //       imgurl: this.goodsDetail.image_url, // 商品图片
          //       link: '', // 商品链接地址
          //       title: this.goodsDetail.title, // 商品标题
          //       price: this.goodsDetail.price// 商品价格
          //     }
          //   }
          // }
          // setMiniChat(dataInfo)
        }
      })
    },
    // 点击查看图片
    clickToViewImg(list, index) {
      console.log(list, index)
      const imgList = []
      list.forEach(item => {
        imgList.push(item.url)
      })
      ImagePreview({
        images: imgList,
        startPosition: index
      })
    },
    // 点击进入购物车
    clickToShopCar() {
      this.$router.push({ name: 'shop-car' })
    },
    // 点击联系客服
    clickToAdmin() {
      console.log('进入客服页面')
    },
    // 点击加入购物车
    addShopCar() {
      this.$refs.goodsDialog.isOpen = true
      if (this.goodsDetail.sku_lists && this.goodsDetail.sku_lists.length > 0) {
        this.goodsDetail.sku_lists.forEach(sku => {
          this.$set(sku, 'buyNum', 0)
        })
      }
      this.$refs.goodsDialog.goodsItem = this.goodsDetail
      this.$refs.goodsDialog.type = 1
    },
    // 点击立即购买
    buyNow() {
      this.$refs.goodsDialog.isOpen = true
      if (this.goodsDetail.sku_lists && this.goodsDetail.sku_lists.length > 0) {
        this.goodsDetail.sku_lists.forEach(sku => {
          this.$set(sku, 'buyNum', 0)
        })
      }
      this.$refs.goodsDialog.goodsItem = this.goodsDetail
      this.$refs.goodsDialog.type = 2
    },
    // 点击确认选择成功
    confirm(type) {
      this.isOpen = false
      // 点击加入购物车
      if (type === 1) { // 加入购物车
        this.addShopCarPost()
      } else if (type === 2) { // 生成订单
        this.$router.push({ name: 'shop-settlement', query: {
          orderPrice: this.getTotalNumAndPrice().totalPrice,
          dataList: JSON.stringify([this.goodsDetail])

        }})
      }
    },
    addShopCarPost() {
      const data = {
        item_ids: [],
        sku_ids: [],
        nums: []
      }
      this.goodsDetail.sku_lists.forEach(sku => {
        data.item_ids.push(sku.item_id)
        data.sku_ids.push(sku.sku_id)
        data.nums.push(sku.buyNum)
      })
      PostAddCart(data).then(res => {
        const data = res.data
        if (data.status_code === 200) {
          this.$toast('加入购物车成功')
          this.isOpen = false
        }
      })
    },
    // 点击选择sku
    openBottomList(goodsDetail) {
      console.log('goodsItem=', goodsDetail)
      // 给每一个sku设置一个初始购买数
      this.goodsDetail.sku_lists.forEach(sku => {
        this.$set(sku, 'buyNum', 0)
      })
    },
    // 计算总件数和总价
    getTotalNumAndPrice() {
      let totalNum = 0
      let totalPrice = 0
      if (this.goodsDetail.sku_lists) {
        this.goodsDetail.sku_lists.forEach(sku => {
          totalNum += sku.buyNum
          totalPrice += sku.buyNum * parseFloat(sku.price)
          // todo:价格小数位数
        })
      } else {
        totalNum = totalPrice = 0
      }
      return { 'totalNum': totalNum, 'totalPrice': (totalPrice.toFixed(2)) }
    }
  }
}
</script>

<style  lang="scss">
  @import "src/styles/mixin.scss";
  .goodsDetail{
    .banner{
      width: 100%;
      background-color: #fff;
      margin-bottom: pxCalc(10px);
      .bannerSwiper{
        width: 100%;
        height: pxCalc(375px);
      }
      .van-swipe{
        height: 100%;
      }
    }
    img {
      width: 100%;
      height: 100%;
      object-fit:cover;
    }
    .goodsInfo{
      height: pxCalc(125px);
      width: 100%;
      padding: pxCalc(20px);
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      .price{
        font-size: pxCalc(18px);
        color: #ff0000;
        font-weight: bold;
      }
      .tip{
        display: inline-block;
        margin-left: pxCalc(5px);
        font-size: pxCalc(12px);
        color: #a1a1a1;
      }
      .title{
        height: 3em;
        font-size: pxCalc(15px);
        display: inline-block;
        width: 100%;
        background-color: #fff;
        .van-swipe{
          height: 100%;
        }
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .goodsInfo{
        height: pxCalc(125px);
        width: 100%;
        padding: pxCalc(20px);
        .price{
          font-size: pxCalc(18px);
          color: #ff0000;
          font-weight: bold;
        }
        .tip{
          display: inline-block;
          margin-left: pxCalc(5px);
          font-size: pxCalc(12px);
          color: #a1a1a1;
        }
        .title{
          height: 3em;
          font-size: pxCalc(15px);
          display: inline-block;
          width: 100%;
          word-break:break-all;
          display:-webkit-box;
          -webkit-line-clamp:2;
          -webkit-box-orient:vertical;
          overflow:hidden;
        }
      }
    }
    .detail{
      width: 100%;
      background-color: #fff;
      padding: 0 pxCalc(20px) pxCalc(70px) pxCalc(20px);
      .top {
        height: pxCalc(40px);
        line-height: pxCalc(40px);
        font-size: pxCalc(14px);
        font-weight: bold;
        padding-top: pxCalc(5px);
        margin-bottom: pxCalc(20px);
        display: flex;
        justify-content: left;
        span{
          display: inline-block;
          height: 100%;
          width: 5em;
          border-bottom: 1px solid #000;
        }
        .empty{
          border-bottom:1px solid #eee ;
          width: 100%;
        }
      }
      .content{
        width: 100%;
        p{
          width: 100%;
          .wscnph{
            width: 100%;
          }
        }

      }
    }
    .footerBox{
      position: fixed;
      bottom: 0;
      z-index: 9999;
      height: pxCalc(50px) !important;
      padding: pxCalc(5px) pxCalc(20px);
      border-top: 1px solid #eee;
      background-color: #fff;
      width: 100%;
      display: flex;
      justify-content: space-between;
      color: #666;
      span{
        display: inline-block;
      }
      .btnIcon{
        width: 30%;
        display: flex;
        justify-content: space-around;
        flex-direction: row;
        .shopCar{
          padding-top: pxCalc(5px);
          display: flex;
          text-align: center;
          justify-content: center;
          flex-direction: column;
          position: relative;
          svg{
            margin: 0 auto;
            font-size: pxCalc(20px);
          }
          .redPoint{
            display: inline-block;
            position: absolute;
            color: #fff;
            top:0;
            right:0;
            line-height: pxCalc(14px);
            background-color: #ff0000;
            min-width: pxCalc(14px);
            min-height: pxCalc(14px);
            text-align: center;
            border-radius: 15px;
            font-size: pxCalc(12px);
          }
        }
        .admin{
          padding-top: pxCalc(5px);
          display: flex;
          text-align: center;
          justify-content: center;
          flex-direction: column;
          svg{
            margin: 0 auto;
            font-size: pxCalc(20px);
          }
        }
      }
      .btnGroup{
        width: pxCalc(205px);
        height: 100%;
        line-height: pxCalc(40px);
        display: flex;
        background: url("../../../assets/images/goodsImg/buttomTow.png") no-repeat center;
        background-size: 100% 100%;
        -webkit-background-origin: content-box;
        background-origin: content-box;
        justify-content: space-between;
        .addShopCar{
          width: 50%;
          position: relative;
          border-radius: 50px;
        }
        .buyNow{
          width: 50%;
          border-radius: 50px;
        }
      }
    }
    .chooseBox{
      height: pxCalc(180px);
      overflow-x: scroll;
      &::-webkit-scrollbar{
        display: none;
      }
      .itemBox{
        border-top: 1px solid #eee;
        display: flex;
        /*line-height:pxCalc(60px);*/
        justify-content: space-between;
        .leftItem{
          padding: pxCalc(20px) 0;
        }
        .rightItem{
          .storeNum{
            display: inline-block;
            color: #aaa;
          }
          .numInput{
            height: 100%;
            padding: pxCalc(20px) 0;
            display: flex;
            line-height: pxCalc(30px);
            flex-direction: row;
            justify-content: center;
          }
        }
      }
    }
  }
</style>
